#@layout()
#define main()
<form class="layui-form layui-form-pane f-form">
    <style type="text/css">
        .layui-upload-img {
            width: 180px;
            height: 180px;
            margin: 0 10px 10px 0;
        }

        .layui-card-body {
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
        }
    </style>
    #(token)
    <input type="hidden" class="layui-input" name="taskCode" value="10004"/>
    <div class="layui-row layui-col-space1 task-row">
        #set(req=true)
        #@colStart('设备分组',6)
        <div id="groupDiv">
        #for(data:deviceGroupList)
        <input type="checkbox" name="groupId" lay-filter="groupFilter" title="#(data.name??)#(data.online??)" value="#(data.id??)"/>
        #end
        </div>
        #@colEnd()
    </div>

    <div class="layui-row layui-col-space1 task-row">
        <input lay-skin="primary" type="checkbox" name="type" lay-filter="devideDetails" title="设备明细"/>
    </div>

    <div class="layui-form-item" id="deviceListDiv" style="display: none"></div>

    <div class="layui-row layui-col-space1 task-row">
        #set(req=true)
        #@colStart("平台",6)
        <select name="platform" class="layui-input" lay-search lay-filter="platform" lay-verify="required|">
            <option value="1">小红书</option>
        </select>
    </div>

    <div class="layui-row layui-col-space1 task-row">
        #set(req=true)
        #@colStart("标题内容",6)
        <textarea style="height:100px" class='layui-input  show-text' id="content" name="content" value=""
                  id="title"
                  lay-verType='tips'
                  maxlength="5000" minlength="1" placeHolder="必填" lay-verify="required|"></textarea>
        #@colEnd()
    </div>

    <div class="layui-row layui-col-space1 task-row">
        <label class="layui-form-label">图片</label>
        <input id="imageUrl" type="hidden" name="imageUrl" value="">
        <button type="button" class="layui-btn" id="imgBtn">多图片上传</button>
    </div>

    <div class="layui-upload">

        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图<font color="red">&nbsp;*</font>
            <div class="layui-upload-list" id="image_container">

            </div>
        </blockquote>

        <label class="layui-form-label">视频</label>

        <button type="button" class="layui-btn" id="videoBtn"><i class="layui-icon"></i>
            上传视频
        </button>
        <button type="button" class="layui-btn" onclick="openVideo()" id="look"><i class="layui-icon"></i>
            预览
        </button>

        <div class="layui-input-block">
            <video id="video"  src="" style="width: 500px;height: 150px"/>
            <input id="videoUrl" name="videoUrl" type="hidden" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="task_submit" >生成任务</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

#define js()
<script>
    layui.use(['form', 'upload'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form
            , upload = layui.upload;

        form.on('checkbox(groupFilter)', function (data) {
            let groupId = data.value;
            if ($(this).prop('checked')) {
                getDeviceList(groupId, form);
            } else {
                $("#deviceListDiv"+groupId).remove();
            }
        });

        form.on('checkbox(devideDetails)', function (data) {
            $('#deviceListDiv').toggle();
            if($("#deviceListDiv").is(":hidden")){
                $('#deviceListDiv').find("input[type=checkbox]").each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            }
        });

        //全选
        form.on('checkbox(allChoose)', function (data) {
            // var child = $("input[type='checkbox']");
            $(this).parent().find("input[type=checkbox]").each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('select(deviceGroup)', function (data) {
            let groupId = data.elem[data.elem.selectedIndex].value;
            getDeviceList(groupId, form);
        });

        function getDeviceList(groupId, form) {
            var url = "#(path)/device/group/deviceList?groupId=" + groupId;
            let deviceDiv=$('<div></div>'); //创建一个父div
            deviceDiv.attr('id','deviceListDiv'+groupId); //给父div设置id
            deviceDiv.attr('groupId', groupId);
            deviceDiv.addClass("layui-form-item");
            $.ajax({
                url: url,
                type: "POST",
                // data:params||{},
                success: function (result) {
                    if (result.length > 0) {
                        $(deviceDiv).append('<input lay-skin="primary" type="checkbox" name="type" lay-filter="allChoose" title="执行设备"/><br/>');
                    }
                    for (var i = 0; i < result.length; i++) {
                        var data = result[i];
                        $(deviceDiv).append('<input type="checkbox" name="deviceId" lay-filter="choiceOne" title="' + data.name + data.online +  '" value="' + data.id + '"/>')
                        if ((i+1) % 5 == 0) {
                            $(deviceDiv).append('<br>');
                        }
                    }
                    $('#deviceListDiv').append(deviceDiv);
                    form.render('checkbox');
                }
            });
        }

        upload.render({
            elem: '#imgBtn'
            , auto: true //选择文件后不自动上传
            , multiple: true
            , exts: 'jpg|png|jpeg'  // 图片文件类型
            , accept: 'images'         //只能上传图片文件
            , acceptMime: 'image/*'    //规定打开文件选择框时，筛选出的文件类型
            , size: 1024               // 上传不能超过1M
            , number: 9                // 设置同时可上传的文件数量
            , url: '#(path)/task/uploadFile'
            , before: function (obj) { //
                var value = $('#imageUrl').val();
                var values=value.split(",");
                if(values.length>=9){
                    layer.msg("只能上传9张照片");
                    layer.stopPropagation() ;
                }
                layer.load(); //上传loading
            }

            , done: function (res) {
                $('#image_container').append('<div style="display: inline-block" ><img src="' + res.msg + '" alt="' + res.msg + '" class="layui-upload-img"  title="双击删除该图片" ondblclick="delImg(this)"></div>')
                var value = $('#imageUrl').val();
                if (value != "") {
                    $('#imageUrl').attr("value", value + "," + res.msg);
                } else {
                    $('#imageUrl').attr("value", res.msg);
                }
                layer.closeAll('loading'); //关闭loading
            }
        });

        upload.render({
            elem: '#videoBtn'
            , auto: true //选择文件后不自动上传
            , accept: 'video'         //只能上传图片文件
            , acceptMime: 'video/*'    //规定打开文件选择框时，筛选出的文件类型
            , url: '#(path)/task/uploadFile'
            , before: function (obj) { //
                layer.load(); //上传loading
            }
            , choose: function (obj) {

                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                $('#video').attr("src", res.msg);
                $('#videoUrl').attr("value", res.msg);
                $('#videoBtn').html("替换视频");
                $('#look').html("预览");

                layer.closeAll('loading'); //关闭loading
            }
        });

        form.on('submit(task_submit)', function (data) {
            let count = $("input[name='groupId']:checked").length;
            if (count < 1) {
                layer.msg('请至少选择一个设备！', {icon: 2});
                return false;
            }

            var img_length = $("#image_container > div > img").length;
            if (img_length == 0 && $('#videoUrl').val() == "") {
                layer.msg('至少上传一个图片或者视频！', {icon: 2});
                return false;
            }
            var content = $('#content').val();
            
            if (content.length < 1) {
                layer.alert("您的内容过短");
                return false;
            }
            var videoNum = $('#videoUrl').val() == "" ? 0 : 1;
            if(img_length + videoNum > 6){
                layer.msg("照片和视频总共只能上传6张");
                //layer.stopPropagation() ;
                return false;
            }

            var fields=$(data.form).serialize();
            $.ajax({
                url : "#(path)/task/save",
                type : "POST",
                async: false,
                dataType : "json",
                data: fields,
                success : function(result) {
                    if (result.code == "success") {
                        layer.msg("发布成功",{icon:1});
                    } else {
                        layer.msg("发布失败",{icon:2});
                    }
                    $('#recordIds').tagsinput('removeAll');
                },
                error : function(result) {
                    layer.msg("发布失败",{icon:2});
                }
            });
            return false;
        });
    });

    function delImg(thisimg) {
        //获取下标
        var subscript = $("#image_container img").index(thisimg);
        //删除图片
        thisimg.remove();
        var value = $('#imageUrl').val();
        var newValue = "";

        if (value != "") {
            var attr = value.split(",")
            for (var i = 0; i < attr.length; i++) {
                if (subscript != i) {
                    newValue += attr[i] + ",";
                }
            }
            if (newValue.length > 0) {
                newValue = newValue.substr(0, newValue.length - 1);

            }
            $('#imageUrl').attr("value", newValue);
        }
    }

    function openVideo() {
        var videoUrl = $('#videoUrl').val();
        if (videoUrl != "") {
            var index = layer.open({
                type: 2,
                content: videoUrl,
                area: ['600px', '450px'],
                offset: 't',
                maxmin: true,
                end: function () {

                }
            });
        }
    }
</script>

#end

#end
